<template>
  <SettingItem title="整体风格设置">
    <div class="setting-drawer-index-blockChecbox">
      <a-tooltip title="暗色菜单风格">
        <div class="setting-drawer-index-item" @click="handleMenuTheme(1)">
          <img src="@/components/SettingDrawer/icons/darkMenu.svg" alt="dark" />
          <div
            class="setting-drawer-index-selectIcon"
            v-if="store.userStore.theme === 'defaultAlgorithm' && store.userStore.aside === 'dark'"
          >
            <CheckOutlined />
          </div>
        </div>
      </a-tooltip>

      <a-tooltip title="亮色菜单风格">
        <div class="setting-drawer-index-item" @click="handleMenuTheme(2)">
          <img src="@/components/SettingDrawer/icons/lightMenu.svg" alt="light" />
          <div
            class="setting-drawer-index-selectIcon"
            v-if="store.userStore.theme === 'defaultAlgorithm' && store.userStore.aside === 'light'"
          >
            <CheckOutlined />
          </div>
        </div>
      </a-tooltip>

      <a-tooltip title="黑夜模式">
        <div class="setting-drawer-index-item" @click="handleMenuTheme(3)">
          <img src="@/components/SettingDrawer/icons/darkTheme.svg" alt="dark theme" />
          <div
            class="setting-drawer-index-selectIcon"
            v-if="store.userStore.theme === 'darkAlgorithm' && store.userStore.aside === 'dark'"
          >
            <CheckOutlined />
          </div>
        </div>
      </a-tooltip>
    </div>
  </SettingItem>
</template>
<script lang="ts" setup name="GlobalStyle">
import { watch } from 'vue'
// import { systemConfig } from '@/store/reactiveState'
// import { TOGGLE_THEME, SET_DARK_MODE } from '@/store/mutation-types'
// import useSiteSettings from '@/store/useSiteSettings'
import { CheckOutlined } from '@ant-design/icons-vue'
import SettingItem from './SettingItem.vue'

import store from '@/store'

// const { navTheme, darkMode } = useSiteSettings()

const handleMenuTheme = (i) => {
  if (i === 1) {
    store.userStore.theme = 'defaultAlgorithm'
    store.userStore.aside = 'dark'
    store.userStore.color.colorTextBase = '#000'
  } else if (i === 2) {
    store.userStore.theme = 'defaultAlgorithm'
    store.userStore.aside = 'light'
    store.userStore.color.colorTextBase = '#000'
  } else if (i === 3) {
    store.userStore.theme = 'darkAlgorithm'
    store.userStore.aside = 'dark'
    store.userStore.color.colorTextBase = '#fff'
  }
}

// const handleDarkMode = (isDark) => {
//   systemConfig.commit(SET_DARK_MODE, isDark)
// }
</script>
<style lang="less" scoped></style>
